<!DOCTYPE HTML>
<html>

<head>
	<script type="text/javascript">

    window.onload = function () {
    
    var dataPointsError = [];
    var dataPointsSpeed = [];


    var xmlhttp = new XMLHttpRequest();
    var url = "movement6.log.json";
    //var url = "dataset/?markers=1";

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myArr = JSON.parse(xmlhttp.responseText);
            myFunction(myArr);
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    function myFunction(arr) {
        var i;
        for(i = 0; i < arr.length; i++) {

          if (arr[i].regError != null) {
			dataPointsError.push({
      					x: arr[i].t - 1658573,
      					y: arr[i].regError
      				});
			}
          if (arr[i].speed != null) {
			dataPointsSpeed.push({
      					x: arr[i].t - 1658573,
      					y: arr[i].speed
      				});
			}


        }

    }

		var chart = new CanvasJS.Chart("chartContainer",{
			zoomEnabled: true,
			/*
      title: {
				text: "Share Value of Two Companies"
			},*/
			toolTip: {
				shared: true

			},
			legend: {
				verticalAlign: "top",
				horizontalAlign: "center",
                                fontSize: 10,
				fontWeight: "bold",
				fontFamily: "calibri",
				fontColor: "dimGrey"
			},
			axisX: {
				/*title: "chart updates every 3 secs"*/
        interlacedColor: "#F0F8FF"
			},
			axisY:{
				prefix: '',
				includeZero: false
			},
            axisY2:{
                prefix: '',
                includeZero: false
            },

			data: [
        {
				type: "line",
				xValueType: "dateTime",
				showInLegend: true,
				name: "Error F",
				dataPoints: dataPointsError
			},
			{
				type: "line",
				xValueType: "dateTime",
				showInLegend: true,
				name: "Speed F" ,
                axisYType: "secondary",
				dataPoints: dataPointsSpeed
			}
      ],
          legend:{
            cursor:"pointer",
            itemclick : function(e) {
              if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
              }
              else {
                e.dataSeries.visible = true;
              }
              chart.render();
            }
          }
		});

		var updateInterval = 3000;

		var updateChart = function () {
			chart.render();

		};

		// generates first set of dataPoints
		updateChart();

		// update chart after specified interval
		setInterval(function(){updateChart()}, updateInterval);
	}
	</script>
	<script type="text/javascript" src="js/canvasjs.min.js"></script>
</head>
<body>
	<div id="chartContainer" style="height: 700px; width: 100%;">
	</div>
</body>


</html>
